<template>
  <div>
    <h1>筛选订单</h1>
    <el-select
      clearable
      v-model="find.status"
      class="m-2"
      size="large"
      placeholder="选择订单状态"
    >
      <el-option
        v-for="item in list1"
        :key="item"
        :label="item"
        :value="list1.indexOf(item)"
      />
    </el-select>
    <el-button @click="getdingdanList">查询</el-button>
    <el-table :data="dingdanList" style="width: 100%">
      <el-table-column
        fixed
        prop="orderid"
        label="订单号"
        width="180"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="city"
        label="城市"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="addressDetail"
        label="地区"
        width="100"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="time"
        label="联系电话"
        width="150"
        header-align="center"
        align="center"
      />
      <el-table-column
        label="商品图"
        width="150"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          <img class="img1" :src="scope.row.img1" />
        </template>
      </el-table-column>
      <el-table-column
        prop="proname"
        label="商品简介"
        width="170"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="originprice"
        label="价格"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="discount"
        label="折扣"
        width="80"
        header-align="center"
        align="center"
      />

      <el-table-column
        label="显示(修改)状态"
        width="180"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          <el-select
            clearable
            v-model="scope.row.status"
            class="m-2"
            size="large"
            placeholder="选择修改订单状态"
          >
            <el-option
              v-for="item in list1"
              :key="item"
              :label="item"
              :value="list1.indexOf(item)"
              @click="changefn(list1.indexOf(item), scope.row.orderid)"
            /> </el-select
        ></template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang='ts'>
import { reactive } from "vue";
import service from "../../../utils/service";
const list1 = reactive(["未支付", "待发货", "待收货", "待评价", "已完成"]);

interface IDingdan {
  name: string;
  tel: string;
  province: string;
  city: string;
  county: string;
  addressDetail: string;
  orderid: string;
  originprice: number;
  proname: string;
  status: number;
}
const find = reactive<{ status: number }>({ status: 1 });
let dingdanList = reactive<IDingdan[]>([]);
const getdingdanList = () => {
  service({
    url: "/order/statusList",
    params: find,
  }).then((res: any) => {
    if (res.data.code === "200") {
      dingdanList.length = 0;
      dingdanList.push(...res.data.data);
    }
  });
};
getdingdanList();
const changefn = (index: any, orderid: any) => {
  service({
    url: "/order/updateStatus",
    params: {
      orderid: orderid,
      status: index,
    },
  }).then((res: any) => {
    getdingdanList();
  });
};
</script>

<style scoped>
.el-button {
  margin-left: 20px;
  background-color: rgb(194, 192, 192);
}
img {
  width: 120px;
}
.el-select {
  width: 180px;
  border: none;
  margin: 5px 0px;
}
.el-input__wrapper {
  width: 160px;
}
</style>